<template>
    <div id="wrapper">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <div class="pull-left" style="margin-right: 10%">
                                    <img :src="baseUrl + '/assets/img/portrait.png'" class="img-circle"
                                         style="max-width: 45px; height: auto;"
                                         alt="User Image">
                                </div>
                                <span class="clear"> <span class="block m-t-xs"> <strong
                                        class="font-bold">{{$store.state.user.name}}</strong>
                           </span> <small class="text-muted text-xs block"><i class="fa fa-circle text-success"></i> 在线</small> </span>
                            </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <!--<li  v-on:click="showDialog()">-->
                                <!--<a>-->
                                <!--<i class="fa fa-exchange"></i> 切换-->
                                <!--</a>-->
                                <!--</li>-->
                                <!--<li class="divider"></li>-->
                                <li>
                                    <a :href="baseUrl + '/logout'"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        <i class="fa fa-sign-out"></i>登出
                                    </a>

                                    <form id="logout-form" :action="baseUrl + '/logout'" method="POST"
                                          style="display: none;">
                                        <input type="hidden" v-bind:value="token" name="_token"/>
                                    </form>
                                </li>
                            </ul>
                        </div>

                        <div class="logo-element">
                            <div class="dropdown ">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                    Bright
                                </a>

                            </div>
                        </div>

                    </li>

                    <li  v-show="userCan('users')|| userCan('logs')||userCan('studentlog')||userCan('rbac')">
                        <a href="/"><i class="fa fa-th-large" ></i> <span class="nav-label">后台信息</span> <span
                                class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <router-link tag="li"  v-show="userCan('users')" to="/users">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 人员管理 </span></a>
                            </router-link>
                            <router-link tag="li" v-show="userCan('logs')" to="/adminlogs">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 操作记录 </span></a>
                            </router-link>
                            <router-link tag="li" v-show="userCan('studentlog')" to="/studentlogs">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 学生操作记录 </span></a>
                            </router-link>
                            <router-link  tag="li" v-show="userCan('rbac')" to="/roles">
                                <a ><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 权限管理 </span></a>
                            </router-link>
                        </ul>
                    </li>
                    <!--<li v-show="userCan('teacher')">-->
                    <!--<a href="/"><i class="fa fa-th-large"></i> <span class="nav-label">人力资源</span> <span-->
                    <!--class="fa arrow"></span></a>-->
                    <!--<ul class="nav nav-second-level collapse">-->
                    <!--<router-link tag="li" to="/teachers">-->
                    <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                    <!--<span class="nav-label"> 教师管理 </span></a>-->
                    <!--</router-link>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <li v-show="userCan('students')||userCan('StudentInformationConfirmation')" >
                        <a href="/"><i class="fa fa-th-large"></i> <span class="nav-label">学生信息</span> <span
                                class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <router-link tag="li"  v-show="userCan('students')" to="/students">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 学生管理 </span></a>
                            </router-link>
                            <router-link tag="li"  v-show="userCan('StudentInformationConfirmation')" to="/student-confirmation">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 学生信息确认管理 </span></a>
                            </router-link>
                        </ul>
                    </li>

                    <li  v-show="userCan('TermManagement')||userCan('courseManagement')">
                        <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">学习企划</span> <span
                                class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <router-link tag="li" v-show="userCan('TermManagement')" to="/course/year">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 学期管理 </span></a>
                            </router-link>
                            <router-link tag="li" v-show="userCan('courseManagement')" to="/course/list">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 课程管理 </span></a>
                            </router-link>
                        </ul>
                    </li>
                    <li v-show="userCan('UploadingPersonnel')||userCan('CredentialsList')" >
                        <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">资格认证</span> <span
                                class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <router-link tag="li" v-show="userCan('UploadingPersonnel')" to="/professional/user">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 可上传人员 </span></a>
                            </router-link>
                            <router-link tag="li"  v-show="userCan('CredentialsList')" to="/professional/list">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 已上传资格证书列表 </span></a>
                            </router-link>
                        </ul>
                    </li>
                    <li v-show="userCan('ExaminationManagement')||userCan('PerformanceManagement')||userCan('EnglishManagement')">
                        <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">考试规划</span> <span
                                class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <router-link tag="li" v-show="userCan('ExaminationManagement')" to="/exam/list">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 考试管理 </span></a>
                            </router-link>
                            <router-link tag="li" v-show="userCan('PerformanceManagement')" to="/exam/result">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 成绩管理 </span></a>
                            </router-link>
                            <router-link tag="li" v-show="userCan('EnglishManagement')" to="/english">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 四六级管理 </span></a>
                            </router-link>
                        </ul>
                    </li>
                    <li v-show="userCan('ElectiveStudents')||userCan('ClassManagement')||userCan('ClassSelectionManagement')" >
                        <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">课程安排</span> <span
                                class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <router-link tag="li" v-show="userCan('ElectiveStudents')" to="/classStudents">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 选课学员 </span></a>
                            </router-link>
                            <router-link tag="li" v-show="userCan('ClassManagement')" to="/classGroup">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 课组管理 </span></a>
                            </router-link>
                            <router-link tag="li" v-show="userCan('ClassSelectionManagement')"  to="/studentGroup">
                                <a><i class="glyphicon glyphicon-bookmark"></i>
                                    <span class="nav-label"> 选课管理 </span></a>
                            </router-link>
                        </ul>
                    </li>


                    <!--<li v-show="userCan('sources')">-->
                        <!--<a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">公众号</span> <span-->
                                <!--class="fa arrow"></span></a>-->
                        <!--<ul class="nav nav-second-level collapse">-->
                            <!--<router-link tag="li" v-show="userCan('wechat_list')" to="/wechat/list">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 账户管理 </span></a>-->
                            <!--</router-link>-->
                            <!--<router-link tag="li" v-show="userCan('wechat_user')" to="/wechat/users">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 用户管理 </span></a>-->
                            <!--</router-link>-->
                            <!--<router-link tag="li" v-show="userCan('wechat_source')"  to="/wechat/source/picture">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 素材管理 </span></a>-->
                            <!--</router-link>-->
                            <!--<router-link tag="li"  v-show="userCan('sing')" to="/wechat/mass">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 群发消息 </span></a>-->
                            <!--</router-link>-->
                            <!--<router-link tag="li" v-show="userCan('check')" to="/wechat/massLog">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 群发审批 </span></a>-->
                            <!--</router-link>-->
                            <!--<router-link tag="li"  v-show="userCan('sing')" to="/wechat/mymass">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 我的群发 </span></a>-->
                            <!--</router-link>-->
                            <!--<router-link tag="li" to="/wechat/template">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 模板消息 </span></a>-->
                            <!--</router-link>-->
                            <!--&lt;!&ndash;<router-link tag="li" to="/course/year">&ndash;&gt;-->
                            <!--&lt;!&ndash;<a><i class="glyphicon glyphicon-bookmark"></i>&ndash;&gt;-->
                            <!--&lt;!&ndash;<span class="nav-label"> 群发消息 </span></a>&ndash;&gt;-->
                            <!--&lt;!&ndash;</router-link>&ndash;&gt;-->
                            <!--&lt;!&ndash;<router-link tag="li" to="/finance/profile">&ndash;&gt;-->
                            <!--&lt;!&ndash;<a><i class="fa fa-group"></i>&ndash;&gt;-->
                            <!--&lt;!&ndash;<span class="nav-label"> 统计报表 </span></a>&ndash;&gt;-->
                            <!--&lt;!&ndash;</router-link>&ndash;&gt;-->
                        <!--</ul>-->
                    <!--</li>-->
                    <!--<li v-show="userCan('wechat')">-->
                        <!--<a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">微信管理</span> <span-->
                                <!--class="fa arrow"></span></a>-->
                        <!--<ul class="nav nav-second-level collapse">-->
                            <!--<router-link tag="li" to="/wechat/index/menu">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 自定义菜单 </span></a>-->
                            <!--</router-link>-->
                            <!--<router-link tag="li" to="/wechat/index/replyMessage">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 自动回复 </span></a>-->
                            <!--</router-link>-->
                            <!--<router-link tag="li" to="/wechat/index/message">-->
                                <!--<a><i class="glyphicon glyphicon-bookmark"></i>-->
                                    <!--<span class="nav-label"> 消息管理 </span></a>-->
                            <!--</router-link>-->
                            <!--&lt;!&ndash;<li>&ndash;&gt;-->
                            <!--&lt;!&ndash;<a><i class="glyphicon glyphicon-bookmark"></i>&ndash;&gt;-->
                            <!--&lt;!&ndash;<span class="nav-label"> 自动回复 </span></a>&ndash;&gt;-->
                            <!--&lt;!&ndash;<ul class="nav nav-third-level">&ndash;&gt;-->
                            <!--&lt;!&ndash;<router-link tag="li" to="/wechat/index/replyPicture">&ndash;&gt;-->
                            <!--&lt;!&ndash;<a><i class="glyphicon glyphicon-bookmark"></i>&ndash;&gt;-->
                            <!--&lt;!&ndash;<span class="nav-label"> 图片回复 </span></a>&ndash;&gt;-->
                            <!--&lt;!&ndash;</router-link>&ndash;&gt;-->
                            <!--&lt;!&ndash;<router-link tag="li" to="/wechat/index/replyArticle">&ndash;&gt;-->
                            <!--&lt;!&ndash;<a><i class="glyphicon glyphicon-bookmark"></i>&ndash;&gt;-->
                            <!--&lt;!&ndash;<span class="nav-label"> 图文回复 </span></a>&ndash;&gt;-->
                            <!--&lt;!&ndash;</router-link>&ndash;&gt;-->
                            <!--&lt;!&ndash;<router-link tag="li" to="/wechat/index/replyMessage">&ndash;&gt;-->
                            <!--&lt;!&ndash;<a><i class="glyphicon glyphicon-bookmark"></i>&ndash;&gt;-->
                            <!--&lt;!&ndash;<span class="nav-label"> 文字回复 </span></a>&ndash;&gt;-->
                            <!--&lt;!&ndash;</router-link>&ndash;&gt;-->

                            <!--&lt;!&ndash;</ul>&ndash;&gt;-->
                            <!--&lt;!&ndash;</li>&ndash;&gt;-->

                            <!--&lt;!&ndash;<router-link tag="li" to="/finance/profile">&ndash;&gt;-->
                            <!--&lt;!&ndash;<a><i class="fa fa-group"></i>&ndash;&gt;-->
                            <!--&lt;!&ndash;<span class="nav-label"> 统计报表 </span></a>&ndash;&gt;-->
                            <!--&lt;!&ndash;</router-link>&ndash;&gt;-->
                        <!--</ul>-->
                    <!--</li>-->


                </ul>

            </div>
        </nav>
        <div id="page-wrapper" class="gray-bg">
            <div class="row border-bottom">
                <nav class="navbar navbar-fixed-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header">
                        <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="javascript:;"><i
                                class="fa fa-bars"></i>
                        </a>

                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li>
                            <a :href="baseUrl + '/logout'"
                               onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                <i class="fa fa-sign-out"></i>登出
                            </a>
                        </li>
                    </ul>

                </nav>
            </div>

            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>{{title}}</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="/">首页</a>
                        </li>
                        <li class="active">
                            <strong>{{title}}</strong>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-2">

                    <!--<div class="pull-right social-action dropdown">-->
                    <!--<button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">{{$store.state.on_line_weChat_name}} <span class="caret"></span></button>-->
                    <!--<ul class="dropdown-menu m-t-xs">-->

                    <!--<li v-for="(item,key) in $store.state.weChat_name" v-on:click="changWeChat(item,key)" ><a href="javascript:;">{{item}}</a></li>-->
                    <!--</ul>-->
                    <!--</div>-->

                </div>
            </div>

            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <!--<transition  mode='out-in' enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">-->
            <router-view></router-view>
            <!--</transition>-->
            <div class="footer">
                <div>
                    <strong>Copyright</strong> 天津崇光科技有限公司 &copy; 2014-2018
                </div>
            </div>

        </div>

        <!--<el-dialog :stateManager="stateManager"></el-dialog>-->
    </div>
</template>

<script>
    //    import {mapState} from 'vuex'
    //    import  dialog from './views/components/_dialog.vue';
    export default {
        name: 'app',
//        components: {
//            'el-dialog': dialog,
//        },
        data: function () {
            return {
                stateManager: {
                    DialogVisible: false,
                }
            }

        },
        computed: {
            baseUrl() {
                return window.Laravel.baseUrl
            },
            title() {
                return this.$store.state.title;
            },
            token() {
                return window.Laravel.csrfToken
            }
        },
        methods: {
            userCan: function (pre) {
//                console.log(this.$store.state.roles);
                let i = this.$store.state.roles.length;
                while (i--) {
                    if (this.$store.state.roles[i] === pre) {
                        return true;
                    }
                }
                return false;

            },
            showDialog: function () {
                this.stateManager.DialogVisible = true;
            },
//            changWeChat: function (name,id) {
//                this.$store.commit('seton_line_weChat_id', id) ;
//                this.$store.commit('seton_line_weChat_name',name) ;
//                this.$router.replace('/wechat/list');
//            }
        },

        created() {
            this.$store.dispatch('getUserinfo');
            this.$store.dispatch('getOrg');
            // this.$store.dispatch('getDefaultWeChat');
        },
//        watch: {
//            '$route' (to, from) {
//                const toDepth = to.path.split('/').length
//                const fromDepth = from.path.split('/').length
//                this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
//            }
//        },
    }
</script>

<style>

</style>
